<template>
  <div class="vpd-img-wrapper" :style="{
          width: val.w + 'px',
          height: val.h + 'px',
          border: val.borderWidth+ 'px solid '+val.borderColor,
          backgroundColor: val.backgroundColor,
          padding: val.padding+'px'
       }">
    <el-image class="vpd-img"
              style="width: 100%"
      :src="imgUrl"
      :fit="val.fit">
      <div slot="error" class="image-slot">
        <i class="el-icon-picture-outline"></i>
      </div>
    </el-image>
    <vpd-text class="vpd-img-text" v-if="val.description && val.description.text" :val="val.description"/>
  </div>

</template>
<script>
  import StylePane from './style.vue';
  import dataMixin from '../mixins/data';
  import VpdText from '../text'

  const NAME = 'vpd-img';
  export default {
    mixins: [dataMixin],
    name: NAME,
    icon: 'vpd-img',
    title: '图片',
    panel: StylePane,
    setting: {
      type: NAME,
      dataType: 'text',
      x: 0,
      y: 0,
      w: 200,
      h: 200,
      minWidth: 20,
      minHeight: 20,
      fontSize: 14,
      backgroundColor: null,
      borderWidth: 1,
      borderColor: '#E8EBEE',
      url: '',
      fit: 'contain', //确定图片如何适应到容器框，同原生 object-fit
      padding: 0,
      description:{} //图片描述，复用了text组件
    },
    components:{
      VpdText
    },
    props: {
      val: {
        type: Object
      }
    },
    data() {
      return {
        url: ''
      }
    },
    computed: {
      imgUrl() {
        return process.env.VUE_APP_BASE_API + (this.url || this.val.url);
      }
    },
    watch: {},
    mounted() {

    },
    methods: {
      updateData(data) {
        this.url = data;
      }
    }
  }
</script>
<style lang="scss" scoped>
  .vpd-img-wrapper{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .vpd-img{
      flex: 1;
    }
    .vpd-img-text{
      padding-top: 5px;
    }
  }
</style>
